<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>全屏拼音测试</title>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TweenMax.min.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/PinyinFactory.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/createui.js"></script>
    <script src="../libs/SoundFactory.js"></script>
    <!-- <script src="../libs/Tone.js"></script> -->
    <!-- <script src="../libs/vconsole.js"></script> -->
    <style type="text/css">
        body {
            margin: 0;
            background-color: #07aa8f;
        }
    </style>
</head>

<body>
    <script>
        /**使用moonJs引擎*/
        const url='https://ywx620.gitee.io/learn/rec/sound/ciyu/$num.mp3';
        const [width,height]=[window.innerWidth-5,window.innerHeight-5];
        const titles=[['sm'],['ym'],['ztrd']]
        createjs.Ticker.framerate = 30;

        const moonjs = new MoonJs();
        const canvas=moonjs.createCanvasByMobile();
        canvas.style.backgroundColor='#07aa8f';
        moonjs.init(canvas)
        moonjs.start();//开始渲染
        
        let fontSize=30;
        if(Unify.isMobile()){
            fontSize=50;
        }

        const key='fullPinyin31';
        let score=Number(Unify.getLocalData(key)||0);

        let [curr,total,selNum,selPy]=[0,25,0,0];
        const colors=ColorManager.warnCoolColors([2,3,5,8,11,10,11,9])
        const all=PinyinFactory.all();
        const labels=all.zw;
        let [x,y,xnum,wid,hei]=[10,10,8,0,0];
        wid=width/(xnum+1);
        hei=height/(xnum+8);
        all.sm.push('');//为了对齐加入一个空字符
        let oy=50;
        if(Unify.isMobile()) oy=150;
        draw(all.sm,oy,0,0);
        draw(all.ym,oy+hei*4,1);
        draw(all.zt,oy+hei*8,2);
        draw(['再读一次'],oy+hei*12,3);
        var progress = moonjs.drawProgress(width*0.9,30,colors[0],colors[4]);
		progress.bar.scaleX = 0;
        progress.y=oy+hei*11;
        progress.x=width*0.05;
        var showText=moonText('0/20',fontSize*1.5,'#FFF');
        showText.setXY(width*0.5,progress.y+70)
        var star=moonjs.createDisplay('circle').setColor('yellow').setRadius(fontSize*0.8)
        star.setXY(width*0.9,oy-50)
        star.numTxt=moonText('0',fontSize,'#FFF');
        star.numTxt.setXY(star.x-80,star.y+10);
        function draw(arr,offy=0,t=0){
            let color=colors[t];
            let boxs=[];
            for(let i=0;i<arr.length;i++){
                let name=arr[i];
                let box=moonBoxText(wid,hei,10,name,fontSize,color,'#FFFFFF',true);
                box.name=name;
                moonjs.mouseTouch(box,mouseDown,mouseUp);
                boxs.push(box);
            }
            let label=moonText(labels[t],fontSize/1.5,'#FFF');
            label.textAlign='left';
            [label.x,label.y]=[x+wid/2,offy-10]

            if(t==3){
                label.setText('');
                if(Unify.isMobile()){
                    boxs.forEach((btn)=>{
                        btn.t.setFont('20px Arial')
                    })
                }
            }
            Unify.displayRank(boxs,xnum,wid/xnum,hei/xnum,x+wid/2,y+hei/2+offy)
        }
        function moonText(text,size=16,color="#000"){
            let label= moonjs.createDisplay('font').setText(text).setFont(`20px Arial`).setColor(color);
            if(Unify.isMobile()){
                label.setFont('40px Arial')
            }
            return label
        }
        function moonBoxText(w,h,r=0,txt='文字',size=16,colorBg="#666666",colorTxt='#FFFFFF',isMouse=false){
            let rect=moonjs.createRectText(txt,w,h,'#fff',colorBg);
            if(Unify.isMobile()){
                rect.childs[0].setFont("40px Arial")
            }
            return rect;
        }
        function mouseDown(o){
            o.setScale(0.5);
            TweenMax.killTweensOf(o)//删除动画 
        }
        function mouseUp(o){
            let name=o.name;
            console.log(name);
            TweenMax.to(o,0.5,{scaleX:1,scaleY:1,ease:Bounce.easeOut})//增加动画
            if(name){
                if(name=='再读一次'){
                    replay();
                }else if(name=='重新开始'){
                    restart();
                }else{
                    playPy(name,1);
                    setTimeout
                }
            }
        }
        function playPy(name,type){
            let url='https://ywx620.gitee.io/learn/rec/sound/pinyin/all/$num.mp3';
            url=url.replace('$num',name);
            SoundFactory.alone(url,()=>{
                if(type){
                    if(name==selPy){
                        playRightWrong(1);
                    }else{
                        playRightWrong(0);
                    }
                }
            });
            
        }
        function replay(){
            playSound(titles[selNum])
        }
        function next(){
            //curr++;
            playTitle();
            update();
        }
        function restart(){
            curr=0;
            playTitle();
            update();
        }
        function playTitle(){
            selNum=Math.floor(Math.random()*3);
            if(selNum==0){
                selPy=all.sm[Math.floor(Math.random()*all.sm.length-1)]
            }else if(selNum==1){
                selPy=all.ym[Math.floor(Math.random()*all.ym.length)]
            }else{
                selPy=all.zt[Math.floor(Math.random()*all.zt.length)]
            }
            console.log(selNum,selPy)
            playSound(titles[selNum])
        }
        function update(){
            curr=score%total
            showText.setText(curr);
            progress.bar.scaleX=curr/total;
            star.numTxt.setText(Math.floor(score/total));
            if(curr>=total){
                curr=0;
                setTimeout(update,1000);
            }
        }
        function playRightWrong(type){
            let arr=[['clcl'],['ntbl']]
            let arg=arr[type];
            var urls=[];
            for(let i=0;i<arg.length;i++){
                let name=arg[i];
                let u=url.replace('$num',name);
                urls.push(u);
            }
            SoundFactory.array(urls,()=>{
                if(type) next();
                else     replay();
            });
            if(type){
                score++;
                Unify.setLocalData(key,score);
            }
        }
        function playSound(arg){
            var urls=[];
            for(let i=0;i<arg.length;i++){
                let name=arg[i];
                let u=url.replace('$num',name);
                urls.push(u);
            }
            SoundFactory.array(urls,callBack);
        }
        function callBack(){
            console.log('播放完毕');
            playPy(selPy)
        }


        restart();
    </script>
</body>

</html>
